<template>
  <div class="cell-con">
    <div class="cell-left">
      <div class="cell-title">{{ title }}<span v-if="must" class="must">*</span></div>
      <div class="cell-body" @click="clickItem">
        <div class="left">
          <slot v-if="input||(val!=''&&val!=undefined)" />
          <div v-else class="placeholder">
            <span>{{ placeholder }}</span>
          </div>
        </div>
        <span v-if="icon" class="right">
          <i class="el-icon-arrow-right" />
        </span>
      </div>
    </div>
    <div class="cell-right" />
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  props: {
    'title': {
      type: String,
      default: ''
    },
    icon: {
      type: Boolean,
      default: true
    },
    input: {
      type: Boolean,
      default: false
    },
    val: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    must: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    clickItem: function() {
      this.$emit('clickItem', this.datas)
    }
  }
}
</script>
<style lang="less" scoped>
.cell-con{
  //padding: @margin-yC @margin-xA;
  display: flex;
  align-items: center;
  .cell-left{
    width: 100%;
    .cell-title{
      //color: @fontColorE;
      //padding-bottom: @sectionMarginD;
      .must{
        //color:@color-warning;
      }
    }
    .cell-body{
      display: flex;
      align-items: center;
      justify-content: space-between;
      //color:@fontColor2;
      //line-height: @inputHeightSmall;
      /deep/ .nut-textinput input{
          border:none;
          padding: 0;
          flex: 1;
          //height: @inputHeightSmall;
      }
      .left{
        flex:1;
      }
      .right {
        //.font-dpr(@iconFontSize);
      }
      /deep/ .el-textarea__inner{
        border:none;
        padding:0
      }
      /deep/ .el-input__inner{
        border:none;
        padding: 0;
        //height: @inputHeightSmall;
        //line-height: @inputHeightSmall;
      }
    }
  }
}
</style>
